<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" href="../css/reset.css" />
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/layer/layer.js"></script>
    <title></title>
</head>
<style>
.zl-user-writeinfo {background-color: #fff; padding: 15px;max-width: 600px; margin: 0 auto; }
.zl-user-writeinfo>h3 { color: #102972; padding-bottom: 25px; padding-top: 15px; }
.zl-buyOrding b{font-size: 14px; color: #666;}
.zl-buyOrding p{line-height: 40px; border-bottom: 1px solid #eee; font-size: 16px;}
.zl-buyPro{  margin: 10px 0; border: 1px solid #eee; padding: 5px;}
.zl-buyPro span{display: block; width: 100%; line-height: 40px;}
.zl-buyPro img{margin-right: 3px; border: 1px solid #102972;height: 100px}
#zl-choPay{padding-bottom: 20px;}
#zl-choPay li{position: relative; float: left; width: 24%; margin-right:1%; border-radius: 10px; border: 2px solid #eee;overflow: hidden; }
.chsothis{border: 2px solid #102972!important;}
    
    @media screen and (max-width: 800px) {
        #zl-choPay li{width: 42%!important;margin-right:3%; } 
    }
.chsothis:after{position: absolute; top: -24px; right: -38px; display: block; content: '选择';  width: 80px; height: 50px;line-height: 80px; text-align: center; background-color: #102972; color: #fff; font-size: 12px; transform: rotate(45deg); z-index: 9;}
#zl-choPay h3{padding: 15px 0;}
.zl-user-writeinfo button.zl-user-writebtn {width: 100%; height: 40px; border: none; background-color: #102972;color: #fff; font-size: 16px; font-family: "微软雅黑";border-radius: 6px; }
</style>

<body>
    <div class="zl-user-writeinfo">
        <h3 class="txt-c">[ 订单信息 ]</h3>
        
        <form class="zl-buyOrding" action="">
            <p><b>姓名：</b>王先生</p>
            <p><b>手机：</b>15668952989</p>
            <p><b>邮箱：</b>58414696@qq.com</p>
            <div class="zl-buyPro clearfix"><span class="fl"><b>购买产品：</b>PP1</span><img src="../images/p-1.jpg" class="fl"></div>
            <ul id="zl-choPay" class="clearfix">
                <h3>选择支付方式</h3>
                <li><img src="../images/pay1.jpg"></li>
                <li><img src="../images/pay2.jpg"></li>
            </ul>
            <button class="zl-user-writebtn">立即支付</button>
        </form>
    </div>
    <!--./个人信息提交-->
    <script>
    window.onload = function(){
        var oChosPay= document.getElementById('zl-choPay');
        var aChosWay= oChosPay.getElementsByTagName('li');
        for(var i= 0;i<aChosWay.length;i++){
            aChosWay[i].index=i;
            aChosWay[i].onclick = function(){
                for(var i=0; i<aChosWay.length;i++){
                     aChosWay[i].className = '';
                }
                this.className="chsothis";
                alert(this.index);
            }
        }
    }
    </script>
</body>

</html>